<x-switch [(ngModel)]="loading"></x-switch>
<ul class="news">
  <li *ngFor="let item of list; let i = index">
    <x-skeleton [loading]="loading" [data]="data" active>
      <x-row justify="start" space="1">
        <x-col inherit class="content">
          <x-avatar src="https://ngnest.com/assets/img/logo/logo-144x144.png" size="medium"></x-avatar>
        </x-col>
        <x-col class="content">
          <x-row>
            <x-col>
              <h3>this is title {{ i + 1 }}</h3>
              <p>
                The more you learn, the more you don't know. The more you learn, the more you don't know. The more you learn, the more you
                don't know.
              </p>
            </x-col>
          </x-row>
          <x-row justify="start" space="1">
            <x-col inherit>
              <x-link icon="fto-star">18</x-link>
            </x-col>
            <x-col inherit>
              <x-link icon="fto-thumbs-up">50</x-link>
            </x-col>
            <x-col inherit>
              <x-link icon="fto-info">100</x-link>
            </x-col>
            <x-col></x-col>
            <x-col inherit>
              <div [ngStyle]="{ 'white-space': 'nowrap' }">2020-03-17 22:22</div>
            </x-col>
          </x-row>
        </x-col>
        <x-col inherit class="content">
          <img src="https://ngnest.com/assets/img/logo/logo-144x144.png" [style.width]="'10rem'" [style.height]="'9rem'" />
        </x-col>
      </x-row>
    </x-skeleton>
  </li>
</ul>
